<template>
  <div class="blog">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      <el-breadcrumb-item>查询标签</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白板 -->
    <div>
      <el-card class="blog-box">
        <el-row>
          <el-col :span="3" :offset="1"><h1>所有标签</h1></el-col>
          <el-col :span="4" :offset="16">
            共<span class="totle"> {{ labelNum }} </span>个</el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-button
          type="success"
          plain
          v-for="(label, index) in labels"
          :key="index"
          @click="showDetail(label.id)"
          >{{ label.name + " | " + label.blogNum }}</el-button
        >
      </el-card>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <h1>标签:</h1>
        <el-divider></el-divider>
        <el-tag type="success">{{ label.name }}</el-tag>
        <el-divider></el-divider>
        <h1>该标签下的博客:</h1>
        <el-table
          ref="blogTable"
          :data="blogs"
          highlight-current-row
          :show-header="false"
          style="width: 100%"
        >
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column property="title" width="300"> </el-table-column>
        </el-table>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="pageInfo.totle"
          @current-change="handleChange"
        >
        </el-pagination>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      label: {},
      labels: [],
      pageInfo: {},
      labelNum: 0,
      dialogVisible: false,
      blogs: [],
    };
  },
  methods: {
    async getAllLabels() {
      var d = await this.$http.get("labels");
      this.labels = d.data.labels;
      this.labelNum = d.data.labelNum;
    },
    async getBlogByLid(id, currentPage) {
      var d = await this.$http.get("lblogs/" + id + "/" + currentPage);
      this.blogs = d.data.blogs;
      this.pageInfo = d.data.pageInfo;
    },
    async getLabelById(id) {
      var d = await this.$http.get("label/" + id);
      this.label = d.data;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    showDetail(id) {
      this.getLabelById(id);
      this.getBlogByLid(id, 1);
      this.dialogVisible = true;
    },
    handleChange(currentPage) {
      this.getBlogByLid(this.label.id, currentPage);
    },
  },
  mounted: function () {
    this.getAllLabels();
  },
};
</script>
<style scoped>
.el-button {
  margin: 10px 10px;
}
.totle {
  color: red;
  font-size: 1.2em;
}
</style>